{% extends "layout/manage.html" %}
{% load static %}
{% load issues %}

{% block title %}
    问题
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static "plugin/editor-md/css/editormd.min.css" %}">
    <link rel="stylesheet"
          href="{% static "plugin/bootstrap-datepicker-master/bootstrap-datepicker-master/dist/css/bootstrap-datepicker.min.css" %}">
    <link rel="stylesheet"
          href="{% static "plugin/bootstrap-select/css/bootstrap-select.min.css" %}">
    <link rel="stylesheet" href="{% static 'plugin/select2/css/select2.min.css' %}">
    <style>
        .issues-list .number {
            width: 100px;
            text-align: right;
        }

        .issues-list .number a {
            font-weight: 500;
            padding: 0 10px;
        }

        .issues-list .issue .tags {
            padding: 10px 0;
        }

        .issues-list .issue .tags span {
            margin-right: 20px;
            display: inline-block;
            font-size: 12px;
        }

        .issues-list .issue .tags .type {
            color: white;
            padding: 1px 5px;
            border-radius: 5px;
            background-color: #dddddd;
        }

        .editormd {
            margin-bottom: 0;
        }

        .pd-0 {
            padding: 0 !important;
        }

        /* 筛选 */
        .filter-area .item {
            margin-bottom: 15px;
        }

        .filter-area .item .title {
            padding: 5px 0;
        }

        .filter-area .item .check-list a {
            text-decoration: none;
            display: inline-block;
            min-width: 65px;
        }

        .filter-area .item .check-list label {
            font-weight: 200;
            font-size: 13px;
            margin-left: 3px;
        }

        .filter-area .item .check-list a:hover {
            font-weight: 300;
        }

        .filter-area .item .check-list .cell {
            margin-right: 10px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid clearfix" style="padding: 20px 0;">
        <div class="col-sm-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-search" aria-hidden="true"></i> 筛选
                </div>
                <div class="panel-body filter-area">
                    {% for row in filter_list %}
                        <div class="item">
                            <div class="title">{{ row.title }}</div>
                            <div class="check-list">
                                {% for item in row.filter %}
                                    {{ item }}
                                {% endfor %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="col-sm-9">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-quora" aria-hidden="true"></i> 问题
                </div>
                <div class="panel-body">
                    <a class="btn btn-success btn-sm" data-toggle="modal" data-target="#addModal">新建问题</a>
                    <a class="btn btn-primary btn-sm" data-toggle="modal" data-target="#inviteModal">邀请成员</a>
                </div>
                <table class="table">

                    <tbody class="issues-list">
                    {% for item in issues_object_list %}
                        <tr>
                            <td class="number">
                                <i class="fa fa-circle text-{{ item.priority }}"></i>
                                <a target="_blank"
                                   href="{% url 'issues_detail' project_id=request.tartec.project.id issues_id=item.id %}">{% string_just num=item.id %}</a>
                            </td>
                            <td class="issue">
                                <div>
                                    <a target="_blank"
                                       href="{% url 'issues_detail' project_id=request.tartec.project.id issues_id=item.id %}">{{ item.subject }}</a>
                                </div>
                                <div class="tags">
                                    <span class="type">
                                        {{ item.issues_type.title }}
                                    </span>
                                    <span>
                                        <i class="fa fa-refresh" aria-hidden="true"></i>
                                        {{ item.get_status_display }}
                                    </span>
                                    {% if item.assign %}
                                        <span>
                                        <i class="fa fa-hand-o-right" aria-hidden="true"></i>
                                        {{ item.assign.username }}
                                    </span>
                                    {% endif %}

                                    <span>
                                        <i class="fa fa-user-o" aria-hidden="true"></i>
                                        {{ item.creator.username }}
                                    </span>
                                    {% if item.end_date %}
                                        <span><i class="fa fa-calendar"
                                                 aria-hidden="true"></i> {{ item.end_date }} 截止</span>
                                    {% endif %}
                                    <span><i class="fa fa-clock-o"
                                             aria-hidden="true"></i> {{ item.latest_update_datetime }} 更新</span>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}

                    </tbody>
                </table>
            </div>

            <nav aria-label="...">
                <ul class="pagination" style="margin-top: 0;">
                    {{ page_html|safe }}
                </ul>
            </nav>
        </div>

    </div>

    <div id="addModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">新建问题</h4>
                </div>
                <div class="modal-body" style="padding-right: 40px;">

                    <form id="addForm" class="form-horizontal">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="{{ form.issues_type.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.issues_type.label }}</label>
                            <div class="col-md-10">
                                <div>
                                    <div>
                                        {{ form.issues_type }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="{{ form.subject.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.subject.label }}</label>
                            <div class="col-md-10">
                                <div>
                                    <div>
                                        {{ form.subject }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="{{ form.module.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.module.label }}</label>
                            <div class="col-md-10">
                                <div>
                                    <div>
                                        {{ form.module }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="{{ form.desc.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.desc.label }}</label>
                            <div class="col-md-10">
                                <div>
                                    <div id="editor">
                                        {{ form.desc }}
                                    </div>

                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>

                        <div class="form-group clearfix">

                            <div class="col-md-6 pd-0">
                                <label for="{{ form.status.id_for_label }}"
                                       class="col-md-4 control-label">{{ form.status.label }}</label>
                                <div class="col-md-8 clearfix">
                                    <div>
                                        {{ form.status }}
                                    </div>
                                    <div class="error-msg"></div>

                                </div>
                            </div>
                            <div class="col-md-6 pd-0">
                                <label for=" {{ form.priority.id_for_label }}"
                                       class="col-md-4 control-label">{{ form.priority.label }}</label>
                                <div class="col-md-8">
                                    <div>
                                        {{ form.priority }}
                                    </div>
                                    <div class="error-msg"></div>

                                </div>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <div class="col-md-6 pd-0">
                                <label for="inputPassword3" class="col-md-4 control-label">指派给</label>
                                <div class="col-md-8">
                                    {{ form.assign }}
                                    <div class="error-msg"></div>
                                </div>
                            </div>

                            <div class="col-md-6 pd-0">
                                <label for="inputPassword3" class="col-md-4 control-label">关注者</label>
                                <div class="col-md-8">

                                    {{ form.attention }}

                                    <div class="error-msg"></div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <div class="col-md-6 pd-0">
                                <label for="inputPassword3" class="col-md-4 control-label">开始时间</label>
                                <div class="col-md-8">

                                    <div class="input-group">
                                        <span class="input-group-addon" id="sizing-addon2">
                                            <i class="fa fa-calendar" aria-hidden="true"></i>
                                        </span>
                                        {{ form.start_date }}
                                    </div>
                                    <span class="error-msg"></span>

                                </div>
                            </div>

                            <div class="col-md-6 pd-0">
                                <label for="inputPassword3" class="col-md-4 control-label">截止时间</label>
                                <div class="col-md-8">

                                    <div class="input-group">
                                        <span class="input-group-addon" id="sizing-addon2">
                                            <i class="fa fa-calendar" aria-hidden="true"></i>
                                        </span>
                                        {{ form.end_date }}
                                    </div>
                                    <span class="error-msg"></span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="col-md-6 pd-0">
                                <label for="inputPassword3" class="col-md-4 control-label">模式</label>
                                <div class="col-md-8">
                                    <div>
                                        {{ form.mode }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                            </div>

                            <div class="col-md-6 pd-0">
                                <label for="inputPassword3" class="col-md-4 control-label"> 父问题</label>
                                <div class="col-md-8">

                                    {{ form.parent }}

                                    <div class="error-msg"></div>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="button" class="btn btn-primary" id="btnAddSubmit">添 加</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade in" id="inviteModal" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">邀请成员</h4>
                </div>
                <div class="modal-body" style="padding-right: 40px;">
                    <form id="inviteForm">
                        {% csrf_token %}
                        {% for item in invite_form %}
                            <div class="form-group">
                                <label for="{{ item.id_for_label }}">{{ item.label }}</label>
                                <span>{% if  item.help_text %}（{{ item.help_text }}）{% endif %}</span>
                                {{ item }}
                                <span class="error-msg"></span>
                            </div>
                        {% endfor %}

                    </form>
                    <button type="button" class="btn btn-success" id="btnGenInviteCode">生成邀请码</button>
                    <div id="inviteArea" class="hide">
                        <hr/>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <input type="button" value="邀请链接" class="btn btn-default">
                                </div>
                                <input type="text" class="form-control" id="inviteUrl">
                                <div class="input-group-btn">
                                    <input type="button" value="复制链接" class="btn btn-primary" id="btnCopyUrl">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static "plugin/editor-md/editormd.min.js" %}"></script>
    <script src="{% static "plugin/bootstrap-datepicker-master/bootstrap-datepicker-master/dist/js/bootstrap-datepicker.min.js" %}"></script>
    <script src="{% static "plugin/bootstrap-datepicker-master/bootstrap-datepicker-master/js/locales/bootstrap-datepicker.zh-CN.js" %}"></script>
    <script src="{% static "plugin/bootstrap-select/js/bootstrap-select.min.js" %}"></script>
    <script src="{% static "plugin/bootstrap-select/js/i18n/defaults-zh_CN.min.js" %}"></script>
    <script src="{% static "plugin/select2/js/select2.min.js" %}"></script>
    <script src="{% static "plugin/select2/js/i18n/zh-CN.js" %}"></script>


    <script>
        var ISSUES_URL = "{% url 'issues' project_id=request.tartec.project.id  %}"
        var WIKI_UPLOAD_URL = "{% url 'wiki_upload' project_id=request.tartec.project.id  %}"
        var INVITE_URL = "{% url 'invite' project_id=request.tartec.project.id  %}"
        $(function () {
            bindBootStrapModelShow()
            initBootStrap_Datepicker()
            bindOnSubmit()
            bindCheckHref()
            initSelect2()
            bindInvite()
            btnCopy()
        })

        // 生成邀请码
        function bindInvite() {
            $("#btnGenInviteCode").click(function () {
                var csrftoken = $('input[name=csrfmiddlewaretoken]').val();
                $.ajax({
                    url: INVITE_URL,
                    type: "POST",
                    dataType: "JSON",
                    data: $('#inviteForm').serialize(),
                    success: function (res) {
                        if (res.status) {
                            $("#inviteArea").removeClass("hide").find("#inviteUrl").val(res.data)
                        } else {
                            $.each(res.error, function (k, v) {
                                $("#id_" + v).next(".error-msg").text(v[0])
                            })
                        }
                    }
                })
            })
        }

        // 点击复制按钮复制
        function btnCopy() {
            $("#btnCopyUrl").click(function () {
                let inputText = $("#inviteUrl")[0]
                inputText.select()
                document.execCommand("Copy")
                alert("复制成功")
            })
        }

        // 给单选框绑定事件
        function bindCheckHref() {
            $(".filter-area").find(":checkbox").click(function () {
                location.href = $(this).parent().attr("href")
            })

        }

        // 初始化select2 下拉框
        function initSelect2() {
            setTimeout(() => {
                $('.select2').select2().on("select2:select", function (e) {
                    location.href = e.params.data.id
                }).on("select2:unselect", function (e) {
                    location.href = e.params.data.id
                })
            }, 200)
        }

        // 给模态框绑定事件
        function bindBootStrapModelShow() {
            $('#addModal').on('show.bs.modal', function (event) {
                // 当模态对话框显示出来的时候，里面的函数才执行
                // 模态框出来的时候，执行初始化Markdown，解决bug
                // 延迟2ms 运行太快还是会出现bug
                setTimeout(() => {
                    initEditorMd()
                }, 200)
            })
        }

        // 初始化markdown
        function initEditorMd() {
            editormd("editor", {
                // 输入框中的默认提示
                placeholder: "请输入内容",
                // 默认行高
                height: 300,
                // 需要设置配置文件的路径
                path: "{% static 'plugin/editor-md/lib/' %}",
                // 设置是否能上传图片
                imageUpload: true,
                // 设置可以上传图片的文件后缀
                imageFormats: ["jpg", 'jpeg', 'png', 'gif'],
                //  上传图片的地址
                imageUploadURL: WIKI_UPLOAD_URL
            })
        }

        // 初始化时间选择器
        function initBootStrap_Datepicker() {
            $("#id_start_date,#id_end_date").datepicker({
                format: "yyyy-mm-dd", // 数据格式
                startDate: "0", // 从哪一天开始选择，0 表示今天
                language: "zh-CN", // 语言，中文需要导包
                autoclose: true, // 选择完毕，是否自动关闭
            })
        }

        function bindOnSubmit() {
            $("#addForm").find(".error-msg").empty()
            $("#btnAddSubmit").click(function () {
                $.ajax({
                    url: ISSUES_URL,
                    type: "POST",
                    dataType: "JSON",
                    data: $("#addForm").serialize(),
                    success: function (res) {
                        console.log(res)
                        if (res.status) {
                            location.href = location.href
                        } else {
                            $.each(res.errors, function (key, value) {
                                $("#id_" + key).parent().next().text(value[0])
                            })
                        }
                    }
                })
            })

        }
    </script>
{% endblock %}